<template>
	<u-gap height="20"></u-gap>
	<view class="u-p-l-28 u-p-r-28 u-rela u-skeleton">
		<view class="bgw box-radius u-m-b-20" v-if="detail.orderStatus == 0">
			<view class="tabs">
				<view class="tab" :class="[tabActive == 0 ? 'active':'']" @click="bindTab(0)">
					配送到家
				</view>
				<view class="tab" :class="[tabActive == 1 ? 'active':'']" @click="bindTab(1)">
					到店自提
				</view>
			</view>
			<view class="u-p-28" @click="navLogin('/pagesSub/addressList/addressList?from=order')"
				v-show="tabActive == 0 ">
				<view class="u-flex" v-if="currAddress">
					<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20">
						<view class="u-font-32">
							<text>{{currAddress.name}}</text>
							<text class="u-m-l-28">{{currAddress.phone}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							{{currAddress.province}}/{{currAddress.city}}/{{currAddress.district}}/{{currAddress.address}}
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
				<view class="u-flex" v-else>
					<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-p-20">
						<view class="u-font-28">
							<text>选择地址</text>
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
			</view>
			<view class="" v-show="tabActive == 1 ">
				<view class="u-flex u-p-28" @click="navLogin('/pagesSub/shopList/shopList')">
					<image src="/static/images/icon-ti.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20" v-if="currShop">
						<view class="u-font-32">
							<text>{{currShop.storesName}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							{{currShop.province}} {{currShop.city}} {{currShop.district}} {{currShop.address}}
						</view>
					</view>
					<view class="u-flex-1 u-p-20" v-else>
						<view class="u-font-28">
							<text>选择自提点</text>
						</view>
					</view>
					<u-icon label-pos="left" name="arrow-right" color="#BBBBBB" size="30"></u-icon>
				</view>
				<u-line></u-line>
				<view class="u-p-l-28 u-p-r-28 u-p-t-10 u-p-b-10">
					<u-form :model="formData" ref="formRef" :label-width="150" :border-bottom="false">
						<u-form-item label="提货人" prop="pickupName">
							<u-input v-model="formData.pickupName" input-align="right" placeholder="请输入姓名" type="text"
								:clearable="true" />
						</u-form-item>
						<u-form-item label="提货电话" prop="pickupPhone">
							<u-input v-model="formData.pickupPhone" input-align="right" placeholder="请输入电话号码" type="number"
								:clearable="true" />
						</u-form-item>
					</u-form>
				</view>

			</view>
		</view>
		<view class="" v-else>
			<view class="bgw box-radius u-m-b-20 u-p-28" v-if="currAddress">
				<view class="u-flex">
					<image src="/static/images/icon-address.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20">
						<view class="u-font-32">
							<text>{{currAddress.name}}</text>
							<text class="u-m-l-28">{{currAddress.phone}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							{{currAddress.province}}/{{currAddress.city}}/{{currAddress.district}}/{{currAddress.address}}
						</view>
					</view>
				</view>
			</view>
			<view class="bgw box-radius u-m-b-20 u-p-28" v-if="currShop">
				<view class="u-flex">
					<image src="/static/images/icon-ti.png" mode="widthFix" style="width: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20">
						<view class="u-font-32">
							<text>{{currShop.storesName}}</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							{{currShop.province}} {{currShop.city}} {{currShop.district}} {{currShop.address}}
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color">
							<text>联系方式：{{currShop.name}}-{{currShop.phone}}</text>
						</view>
						
					</view>
				</view>
			</view>
			
			<view class="bgw box-radius u-m-b-20 u-p-28" v-if="detail.pickup == 2">
				<view class="u-flex">
					<view class="u-flex-1">
						<text class="u-content-color">提货人</text>
					</view>
					<view class="">
						<text class="">{{detail.pickupName}}</text>
					</view>
				</view>
				<u-gap height="10"></u-gap>
				<view class="u-flex">
					<view class="u-flex-1">
						<text class="u-content-color">提货电话</text>
					</view>
					<view class="">
						<text class="">{{detail.pickupPhone}}</text>
					</view>
				</view>
			</view>
			<view class="bgw box-radius u-m-b-20 u-p-28"  v-if="skeletonLoading">
				<view class="u-flex">
					<image class="u-skeleton-circle" src="/static/images/icon-address.png" mode="widthFix"
						style="width: 42upx;height: 42upx;"></image>
					<view class="u-flex-1 u-m-l-20">
						<view class="u-font-32 ">
							<text class="u-skeleton-fillet">标题</text>
						</view>
						<u-gap height="10"></u-gap>
						<view class="u-content-color u-skeleton-fillet">
							标题标题标题标题标题标题
						</view>
					</view>
				</view>
			</view>
			
		</view>

		<view class="bgw box-radius u-p-l-28 u-p-r-28 u-m-b-20" v-if="detail.productList">
			<template v-for="(v,i) in detail.productList">
				<item :detail="v" type="order">
					<template v-slot:right>
						<view class="">
							x{{v.count}}
						</view>
					</template>
				</item>
			</template>
		</view>
		<view class="u-flex u-p-l-28 u-p-r-28 u-m-b-20" v-else>
			<image class="u-skeleton-rect" mode="widthFix" style="width: 136upx;height: 136upx;"></image>
			<view class="u-m-l-20">
				<view class="u-font-32">
					<text class="u-skeleton-fillet">标题标题标题标题标题标题</text>
				</view>
				<u-gap height="10"></u-gap>
				<view class="">
					<text class="u-skeleton-fillet">标题</text>
				</view>
			</view>
		</view>
		<view class="bgw box-radius u-p-28 u-m-b-20">
			<view class="u-flex u-m-b-20">
				<view class="u-content-color u-flex-1">
					<text class="u-skeleton-fillet">商品金额</text>
				</view>
				<view class="">
					<text class="u-skeleton-fillet">￥{{detail.productPrice}}</text>
				</view>
			</view>
			<view class="u-flex u-m-b-20">
				<view class="u-content-color u-flex-1">
					<text class="u-skeleton-fillet">运费</text>
				</view>
				<view class="">
					<text class="u-skeleton-fillet">￥{{detail.freight}}</text>
				</view>
			</view>
			<view class="u-flex">
				<view class="u-content-color u-flex-1">
					<text class="u-skeleton-fillet">合计金额</text>
				</view>
				<view class="color-primary">
					<text class="u-skeleton-fillet">￥{{detail.price}}</text>
				</view>
			</view>
		</view>
		<template v-if="detail.orderStatus == 0">
			<view class="bgw box-radius u-p-28 u-m-b-20">
				<view class="u-p-b-10">
					备注
				</view>
				<u-input v-model="note" placeholder="请输入备注信息" type="textarea" input-align="left" />
			</view>
			<view class="">
				<u-checkbox-group>
					<u-checkbox v-model="agreeFlag" name="agree" shape="circle" active-color="#117B12">
						<view class="u-font-24">
							我已阅读并同意
							<text class="color-primary" @tap.stop="toArticle(3)">《买家协议》</text>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</template>
		<view class="bgw box-radius u-p-28 u-m-b-20" v-if="detail.orderStatus != 0">
			<view class="u-m-b-20">
				订单信息
			</view>
			<view class="u-flex u-m-b-20">
				<view class="u-content-color u-flex-1">
					订单状态：
				</view>
				<view class="">
					<order-status-text v-model="detail.orderStatus"></order-status-text>
				</view>
			</view>
			<view class="u-flex u-m-t-20">
				<view class="u-content-color u-flex-1">
					订单编号：
				</view>
				<view class="">
					{{detail.orderCode}}
				</view>
			</view>
			<view class="u-flex u-m-t-20">
				<view class="u-content-color u-flex-1">
					创建时间：
				</view>
				<view class="">
					{{detail.created}}
				</view>
			</view>
			<view class="u-flex u-m-t-20" v-if="detail.payTime">
				<view class="u-content-color u-flex-1">
					支付时间：
				</view>
				<view class="">
					{{detail.payTime}}
				</view>
			</view>
			<view class="u-flex u-m-t-20" v-if="detail.deliveryTime">
				<view class="u-content-color u-flex-1">
					发货时间：
				</view>
				<view class="">
					{{detail.deliveryTime}}
				</view>
			</view>
			<view class="u-flex u-m-t-20" v-if="detail.receiptTime">
				<view class="u-content-color u-flex-1">
					收货时间：
				</view>
				<view class="">
					{{detail.receiptTime}}
				</view>
			</view>
			<view class="u-flex u-m-t-20" v-if="detail.note">
				<view class="u-content-color u-flex-1">
					订单备注：
				</view>
				<view class="">
					{{detail.note}}
				</view>
			</view>
		</view>
	</view>
	<u-skeleton :loading="skeletonLoading" :animation="true" bgColor="#F9F9F9"></u-skeleton>
	<u-gap height="150"></u-gap>
	<view class="fixed-bottom bgw u-border-bottom" v-if="detail.orderStatus == 0">
		<view class="u-flex u-p-t-20 u-p-b-20 u-p-l-28 u-p-r-28" style="width: 100%;">
			<view class="u-flex-1">
				<text>合计：</text>
				<text style="font-weight: bold;">￥</text>
				<text style="font-weight: bold;" class="u-font-40">{{detail.price}}</text>
			</view>
			<u-button @click="navLogin(`/pagesSub/cancelOrder/cancelOrder?sid=${detail.sid}`)" shape="circle"
				class="btn-grey u-m-l-30">取消订单</u-button>
			<u-button @click="popupShow = true" type="primary" shape="circle" class="u-m-l-30">立即支付</u-button>
		</view>
	</view>
	<view class="fixed-bottom bgw u-border-bottom" v-if="detail.orderStatus == 2">
		<view class="u-flex u-p-t-20 u-p-b-20 u-p-l-28 u-p-r-28" style="width: 100%;">
			<view class="u-flex-1"></view>
			<u-button v-if="detail.courierCompany || detail.courierNumber" @click="logisticsPopupShow = true" type="warning" shape="circle" class="u-m-l-30">物流信息</u-button>
			<u-button @click="confirm" type="primary" shape="circle" class="u-m-l-30">确认收货</u-button>
		</view>
	</view>
	<view class="fixed-bottom bgw u-border-bottom" v-if="detail.orderStatus == 3 && detail.orderType == 1">
		<view class="u-flex u-p-t-20 u-p-b-20 u-p-l-28 u-p-r-28" style="width: 100%;">
			<view class="u-flex-1"></view>
			<u-button @click="navLogin(`/pagesSub/orderEvaluate/orderEvaluate?sid=${detail.sid}&edit=1`)" type="primary" shape="circle"
				class="u-m-l-30">去评价</u-button>
		</view>
	</view>
	<view class="fixed-bottom bgw u-border-bottom" v-if="detail.orderStatus == 4 && detail.orderType == 1">
		<view class="u-flex u-p-t-20 u-p-b-20 u-p-l-28 u-p-r-28" style="width: 100%;">
			<view class="u-flex-1"></view>
			<u-button @click="navLogin(`/pagesSub/orderEvaluate/orderEvaluate?sid=${detail.sid}`)" shape="circle"
				class="btn-grey u-m-l-30">查看评价</u-button>
		</view>
	</view>
	<u-popup v-model="popupShow" mode="bottom" border-radius="14" :closeable="true">
		<view class="u-p-20">
			<view class="u-p-10 u-text-center u-font-36">
				立即支付
			</view>
			<view class="u-text-center u-p-20">
				<text style="font-weight: bold;">￥</text>
				<text style="font-weight: bold;font-size: 48upx;">{{detail.price}}</text>
			</view>
			<u-line color="#F6F6F6" />
			<view class="u-flex u-p-20 box-radius u-m-b-20" style="background-color: #F9F9F9;">
				<image src="/static/images/icon-pay.png" mode="aspectFit" class="payTypeIcon"></image>
				<view class="u-flex-1 u-p-l-20">
					积分支付
				</view>
				<u-icon name="checkmark-circle-fill" color="#117B12" size="36"></u-icon>
			</view>
			<view class="u-p-20">
				<u-button @click="pay" type="primary" shape="circle">支付</u-button>
			</view>
		</view>
	</u-popup>
	
	<u-popup v-model="logisticsPopupShow" mode="center" border-radius="20">
		<view style="width: 640upx;">
			<view class="u-p-l-34 u-p-r-34 u-p-t-50 u-p-b-10">
				<view class="u-m-b-26">
					物流信息
				</view>
				<view class="u-content-color u-m-b-14">
					快递公司：{{detail.courierCompany}}
				</view>
				<view class="u-flex u-content-color" @click="copy(detail.courierNumber)">
					<view class="u-m-r-20">快递编号：{{detail.courierNumber}}</view>
					<image src="/static/images/icon-copy.png" mode="aspectFit" style="width: 28upx;height: 28upx;">
					</image>
				</view>
			</view>
	
			<view class="u-p-40">
				<u-button @click="logisticsPopupShow = false" :custom-style="customStyle" type="warning"
					shape="circle">确定</u-button>
			</view>
		</view>
	</u-popup>

</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import mixins from '@/common/js/mixins.js';
	import mixinOrder from '@/common/js/mixinOrder.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		confirmOrder,
		cancelOrder 
	} = mixinOrder();
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		modal
	} = proxy.$util;
	const props = defineProps({
		sid: {
			type: [String, Number],
			default: '',
		}
	})
	const customStyle = {
		height: '72upx',
		lineHeight: '72upx'
	};
	const confirm = () =>{
		confirmOrder(props.sid,{},()=>{
			getData();
			uni.$emit('order_update')
		})
	}
	const skeletonLoading = ref(true)
	const detail = reactive({})
	const getData = () => {
		if (!props.sid) {
			return;
		}
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getOrderDetail(props.sid).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			for (let key in res.data) {
				detail[key] = data[key]
			}
			if (detail.pickup == 1) {
				if(data.address){
					currAddress.value = {
						address:data.address,
						province:data.province,
						city:data.city,
						district:data.district,
						name:data.name,
						phone:data.phone
					};
				}
				// currAddress.value = detail.address;
				
				currShop.value = null;
				tabActive.value = 0;
			}
			if (detail.pickup == 2) {
				currShop.value = detail.pickupAddress;
				currAddress.value = null;
				tabActive.value = 1;
			}
			note.value = detail.note || ''
			skeletonLoading.value = false
		}).catch(res => {
			skeletonLoading.value = false
		})
	}
	const agreeFlag = ref(true);
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const note = ref('')
	const currAddress = ref(null)
	const currShop = ref(null)
	const formData = reactive({
		pickupName:'',
		pickupPhone:''
	})
	const popupShow = ref(false)
	const logisticsPopupShow = ref(false);
	const tabActive = ref(0)
	const bindTab = (index) => {
		tabActive.value = index
	}
	const editOrder = async () => {
		let data = {
			note: note.value
		};
		if (tabActive.value == 0) {
			data.pickup = 1;
			if (!currAddress.value) {
				return {
					msg: '请选择地址'
				}
			}else{
				if(currAddress.value.sid){
					data.addressSid = currAddress.value.sid;
				}
			}
		}
		if (tabActive.value == 1) {
			data.pickup = 2;
			if (!currShop.value) {
				return {
					msg: '请选择门店'
				}
			}
			if (!formData.pickupName) {
				return {
					msg: '请填写提货人'
				}
			}
			if (!formData.pickupPhone) {
				return {
					msg: '请填写提货电话'
				}
			}
			if(!uni.$u.test.mobile(formData.pickupPhone)){
				uni.$u.toast('提货手机号格式不正确');
				return;	
			}
			data.addressSid = currShop.value.sid;			
			data.pickupPhone = formData.pickupPhone;
			data.pickupName = formData.pickupName;			
		}
		return await proxy.$u.api.editOrder(props.sid, data);
	}
	const pay = async () => {
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		try {
			let res = await editOrder();
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
		} catch (err) {
			uni.$u.toast('错误');
			return;
		}
		let _data = {
			orderSid: props.sid,
			pointsStatus: 4, //积分状态：0=后台变更,1=佣金转积分,2=转入,3=转出,4=积分支付
			type: 1, //变动类型：0=增加，1=减少
			total: detail.price
		}
		proxy.$u.api.changePoints(_data).then(res => {
			let {
				code,
				msg,
				data
			} = res;
			if (code == 200) {
				getData();
				uni.$emit('order_update')
				modal({
					content: msg || '积分支付成功！',
					showCancel: false
				})
			} else {
				modal({
					content: msg,
					showCancel: false
				})
			}
			popupShow.value = false;
		}).catch(() => {
			popupShow.value = false;
		})

	}
	const copy = (d) => {
		if (!d) {
			return;
		}
		uni.setClipboardData({
			data: d,
			success() {
				uni.$u.toast(`已复制"${d}"至剪贴板`);
			}
		});
	}
	const toArticle = (type) => {
		nav('/pagesSub/articleDetail/articleDetail?type='+type)
	}


	onReady(() => {

	})
	onLoad((d) => {
		getData();

	})
	onShow(() => {
		uni.$off('choose_address');
		uni.$once('choose_address', (v) => {
			currAddress.value = v
		})
		uni.$off('choose_shop');
		uni.$once('choose_shop', (v) => {
			currShop.value = v
		})
		uni.$off('order_update');
		uni.$once('order_update', (v) => {
			getData();
		})
	})
</script>
<style lang="scss" scoped>
	.fixed-bottom {
		background-color: #ffffff;
		box-shadow: 0 -4upx 20upx 0 rgba(0, 0, 0, 0.06);
		bottom: 0;
		z-index: 999;
	}

	.payTypeIcon {
		width: 44upx;
		height: 44upx;
	}

	.tabs {
		display: flex;
		width: 100%;
		overflow: hidden;
		border-radius: 10upx 10upx 0 0;
		background: #F2FDF2;
	}

	.tab {
		flex: 0 0 50%;
		height: 40px;
		cursor: pointer;
		position: relative;
		text-align: center;
		line-height: 40px;
		color: #117B12;
	}

	.tab.active {
		background-color: #fff;
		color: #333333;
		font-weight: bold;
	}

	.tab.active:before {
		content: '';
		position: absolute;
		top: 0;
		left: -39px;
		height: 100%;
		width: 40px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,40 C 20,40 20,0 40,0 L 40, 40 Z');
	}

	.tab.active:after {
		content: '';
		position: absolute;
		top: 0;
		right: -40px;
		height: 100%;
		width: 40px;
		z-index: 2;
		background-color: #fff;
		clip-path: path('M 0,0 C 20,0 20,40 40,40 L 0, 40 Z');
	}

	::v-deep.u-form-item {
		padding: 0 0;
	}
</style>